<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input v-model="listQuery.name" placeholder="请输入姓名和身份证号" class="btnScr" :xs="24" :sm="12" :lg="16" />
              <el-button type="primary" icon="el-icon-search" class="btnScrright" :xs="24" :sm="12" :lg="8" @click="src">搜索</el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.gender" placeholder="请选择性别" class="btnScr" clearable @change="src">
                <el-option
                  v-for="item in genderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <!-- <el-input v-model="listQuery.mobile" placeholder="请输入电话" class="btnScr" :xs="24" :sm="12" :lg="16" /> -->
              <el-select v-model="listQuery.mobile" filterable clearable placeholder="请输入电话" :xs="24" :sm="12" :lg="16" class="w100" @change="src">
                <el-option
                  v-for="item in tel"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.source" placeholder="请选择来源" clearable class="btnScr" @change="src">
                <el-option
                  v-for="item in ownerSourceT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.tags" placeholder="请选择标签" clearable class="btnScr" @change="src">
                <el-option
                  v-for="item in tags"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="6" class="agg" style="text-align:right">
              <el-button class="add" @click="showEditForm(null)">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog title="" width="647px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show" :close-on-click-modal="false">
      <h2>{{ txt }} <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form ref="editForm" :model="editForm" :rules="editFormRule" label-width="85px" class="formDiv">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col>
              <el-form-item label="上传头像:">
                <Upload v-if="show" v-model="editForm.avatar" class="bd" :urls="editForm.avatar" :maxcount="1" title="" format="png,jpg,jpeg" @getImage="changeDetailImage" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="姓名:" :required="true">
                <el-input v-model="editForm.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="来源:">
                <el-select v-model="editForm.source" placeholder="请选择来源" class="w100">
                  <el-option
                    v-for="item in ownerSourceT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="性别:">
                <el-select v-model="editForm.gender" placeholder="请选择性别" class="w100">
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="生日:">
                <el-date-picker
                  v-model="editForm.birthday"
                  type="date"
                  style="width: 200px;"
                  placeholder="请选择生日"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="电话:" :required="true" prop="mobile">
                <el-input v-model="editForm.mobile" maxlength="11" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="邮箱:" prop="email" :required="true">
                <el-input v-model="editForm.email" type="email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="身份证:"> <!--prop="idCardQ"-->
                <el-input v-model="editForm.idCard" placeholder="请输入身份证" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="职业:">
                <el-input v-model="editForm.job" placeholder="请输入职业" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="23" :lg="24" class="">
              <el-form-item label="住址:" label-width="85px">
                <!-- <el-select v-model="editForm.province" style="width: 120px;margin-right: 8px" placeholder="请选择省">
                  <el-option label="省1" value="省1" />
                  <el-option label="省2" value="省2" />
                </el-select>
                <el-select v-model="editForm.city" style="width: 120px;margin-right: 8px" placeholder="请选择市">
                  <el-option label="市1" value="市1" />
                  <el-option label="市2" value="市2" />
                </el-select> -->
                <el-cascader
                  v-if="show"
                  v-model="selectedOptions"
                  class="inputY"
                  size="large"
                  :options="options_"
                  placeholder="请选择省市区"
                  @change="handleChange"
                />
                <el-input v-model="editForm.address" style="width: 226px" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="24" :lg="24" class="">
              <el-form-item label="备注:" label-width="85px">
                <el-input
                  v-model="editForm.note"
                  type="textarea"
                  placeholder="请输入内容"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="submitForm()">确 定</el-button>
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>
<script>
import { genderFormat, getCodeToText } from '@/utils/common'
import { genderOptions, ownerSourceT } from '@/utils/consts'
import { getTagList } from '@/api/tag'
import { add, update, filterMobile } from '@/api/manager'
import Upload from '@/components/Upload/SingleImage'
import { regionData, TextToCode } from 'element-china-area-data'
export default {
  components: {
    Upload
  },
  data() {
    const idCardValidity = (rule, code, callback) => {
      var city = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北 ', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏 ', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外 ' }
      var tip = ''
      var pass = true
      if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
        tip = '身份证号格式错误'
        pass = false
      } else if (!city[code.substr(0, 2)]) {
        // tip = "地址编码错误"
        tip = '身份证输入错误'
        pass = false
      } else {
        // 18位身份证需要验证最后一位校验位
        if (code.length === 18) {
          code = code.split('')
          // ∑(ai×Wi)(mod 11)
          // 加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          // 校验位
          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
          var sum = 0
          var ai = 0
          var wi = 0
          for (var i = 0; i < 17; i++) {
            ai = code[i]
            wi = factor[i]
            sum += ai * wi
          }
          //   var last = parity[sum % 11]
          if (parity[sum % 11] !== code[17]) {
            // tip = "校验位错误"
            tip = '身份证输入错误'
            pass = false
          }
        }
      }
      if (!pass) {
        callback(new Error(tip))
      } else {
        callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      var phoneReg = /^1[3-9][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    // var checkEmail = (rule, value, callback) => {
    //   const mailReg = /[\@]/
    //   if (value) {
    //     setTimeout(() => {
    //       if (mailReg.test(value)) {
    //         callback(new Error('请输入正确的邮箱格式'))
    //       } else {
    //         callback(new Error('请输入正确的邮箱格式'))
    //       }
    //     }, 100)
    //   }
    // }
    return {
      txt: '',
      show: false,
      options_: regionData,
      selectedOptions: [],
      listQuery: {
        page: 1,
        limit: 10,
        name: null,
        gender: null,
        mobile: null,
        source: null,
        tags: null,
        type: 0
      },
      editForm: {
        id: undefined,
        name: null,
        source: null,
        gender: null,
        birthday: null,
        mobile: null,
        email: null,
        province: null,
        city: null,
        address: null,
        note: null,
        detailImage: null,
        avatar: null,
        idCard: null,
        district: null
      },
      tel: [],
      disabled: true,
      getCodeToText,
      genderOptions,
      genderFormat,
      ownerSourceT,
      tags: [],
      editFormRule: {
        name: [{ required: true, message: '姓名必填', trigger: ['change', 'blur'] }],
        mobile: [{ validator: checkPhone, required: true, message: '电话号码格式不对', trigger: ['change', 'blur'] }],
        email: [{ pattern: /[\@]/, required: true, message: '邮箱格式不对', trigger: ['change'] }],
        idCardQ: [
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '身份证格式不对'
          },
          { validator: idCardValidity, trigger: ['change', 'blur'], required: true }]
      }
    }
  },
  watch: {
    editForm: {
      handler(newVal, oldVal) {
        if (newVal.name && newVal.mobile && newVal.email) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    // this.getRemoteTags()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getTagList('OWNER_TAG').then(response => {
        if (!response.data) return
        this.tags = response.data
      })
      filterMobile(0).then(response => {
        // this.arr = this.arr.concat(response.data)
        this.tel = response.data
      })
    },
    src() {
      this.$emit('srcData', this.listQuery)
    },
    srcBtn() {
      this.$emit('srcData', this.listQuery)
    },
    changeDetailImage(val) {
      console.log('val:' + val)
      this.editForm.avatar = val.toString()
    },
    // getRemoteTags() {
    //   list(2).then(response => {
    //     if (response.data.length !== 0) {
    //       this.tags = response.data
    //     }
    //   })
    // },
    showEditForm(row = null) {
      this.show = true
      this.selectedOptions = []
      this.editForm = {}
      this.txt = '添加业主'
      if (row !== null) {
        this.editForm = Object.assign(row)
      }
    },
    close() {
      this.$emit('tableData')
      this.editForm = {}
      this.show = false
      this.selectedOptions = []
      this.options_ = regionData
    },
    handleChange(par) {
      this.editForm.province = getCodeToText('', par)
    },
    submitForm() {
      this.$refs.editForm.validate((valid) => {
        if (this.selectedOptions.length > 0) {
          const ctiy = Object.assign(this.editForm.province)
          this.editForm['city'] = ctiy.split('/')[1]
          this.editForm['district'] = ctiy.split('/')[2]
          this.editForm['province'] = ctiy.split('/')[0]
        }
        if (valid) {
          this.loading = true
          if (this.editForm.id === undefined) {
            this.editForm.type = 0
            add(this.editForm).then((response) => {
              console.log(response)
              if (response.code === 200) {
                this.$notify.success({ message: '保存成功' })
                this.editForm = {}
                this.show = false
                this.src()
                this.selectedOptions = []
              //  this.$router.push('owner')
              }
              this.loading = false
            })
          } else {
            update(this.editForm).then((response) => {
              console.log(response)
              this.editForm.type = 0
              if (response.code === 200) {
                this.selectedOptions = []
                this.$notify.success({ message: '更新成功', offset: 50 })
                this.show = false
              }
              this.loading = false
              this.$emit('tableData')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handlePictureCardPreview() {

    },
    handleDownload() {

    },
    handleRemove() {

    },
    showModal(params) {
      this.show = true
      this.selectedOptions = []
      this.txt = '编辑业主'
      if (params !== null) {
        this.editForm = Object.assign({}, params)
        const cityCode = TextToCode[this.editForm.province].code
        this.selectedOptions.push(cityCode)
        const cityCodeA = TextToCode[this.editForm.province][this.editForm.city].code
        this.selectedOptions.push(cityCodeA)
        const cityCodeB = TextToCode[this.editForm.province][this.editForm.city][this.editForm.district].code
        this.selectedOptions.push(cityCodeB)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;margin-bottom: 15px;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:8px!important;padding-right: 8px!important;}
@media (max-width:1200px) {
.flex{display: flex;justify-content: space-between;align-items: center;padding-left:8px!important; padding-right: 8px!important;}
}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.mtright{margin-right: 5px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item div.filediv{width: 100%;height: 100%;}
::v-deep  .el-upload--picture-card{width: 70px;height: 56px;line-height: 66px;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -10px;font-size: 12px;}
.right10{margin-left: 10px;}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7;}
.borbtoonline{border-bottom: 1px solid #f2f2f2;padding-bottom: -15px;}
.bortopline{margin-top: 15px;}
.borbtoonline .el-form-item{margin-bottom: 10px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
.rowPda{padding-right: 10px;}
::v-deep .bd li{border-radius: 50%!important;width: 56px!important;}
::v-deep .inputY input{width: 240px;margin-right: 8px;line-height:36px;height:36px}
</style>

<style>
@media (min-width:1200px) {
        .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
}
</style>
